<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Pet Battle</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="true"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
	<link type="text/css" rel="stylesheet" href="loading.css"/>
	<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
    <style>
         body {
			text-align: center;
            background: #f7f7f7;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }

        html {
            -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
            overflow: hidden;
            background: #f7f7f7;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }
        canvas {
            display: block;
            position: absolute;
            margin: 0 auto;
            padding: 0;
            border: 0;
        }
        #loadingBar{
            position: absolute;
        }
    </style>
</head>

<body onorientationchange="loadingShow();">
    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"
         data-orientation="auto"
         data-scale-mode="showAll"
         data-frame-rate="30"
         data-content-width="480"
         data-content-height="800"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-show-fps-style="x:0,y:0,size:12,textColor:0x00c200,bgAlpha:0.9">
    </div>
    <div class="fullw tc pa" id="loadingUi" style="z-index: 80;width: 640px;height: 960px;transform-origin: 0px 0px; -webkit-transform-origin: 0px 0px;display: none;">
        <div id="gameLogo" class="ma logo pr" style="margin-top: 214px;"></div>
        <div style="margin: 60px auto 170px auto;" class="tc pr">
            <div class="title ib pr" style="margin-right: 22px;"></div>
        </div>
        <div class="tc fullw">
            <div id="gameText" class="fs22px tc pr" style="color: #808080;margin-bottom: 35px;">首次加载时间稍长，请耐心等待...</div>
            <div class="ma loadingbar pr" id="barBg">
                <div class="loadingfill" id="loadingBar">
                    <div class="pa star rotateCf" id="loadingStar" style="right: -13px;top: -5px"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="loadingDiv" style="width:100%;height:100%;background-color: #E0E0E0;position: absolute;left: 0;top:0;z-index: 88;display:none;)">
        <div id="loadingCon" style="position: absolute;left: 50%;top:50%; width:100%;height:338px; width:340px;margin-top:-170px;margin-left:-169px;">
            <img src="./resource/assets/loading/wanba_notice.jpg" id="loadingImg" width="340px" height="338px"/>
        </div>
    </div>
    <div id="connectingDiv" style="display: none; position: absolute;z-index: 9999;width: 100%;height: 100%;text-align: center; )">
        <div class="pa connecting rotateCf" id="connectImg" style="top: 50%;left: 50%; margin-top:-50px;margin-left:-50px;">
        </div>
    </div>
	<!--<script src="ServiceManager.js"></script>
    <script src="jquery.js"></script>
    <script src="yingo.js"></script>
    <script src="communicator.js"></script>-->
    <script>
		/**
    window.openkey="E7905E58121B456AE29A048848DDA53A";
	window.openid="DFB415EFBBFDF85811E8EA7AFE629E2B";
	window.xtoken="7179DD10E94541DBB2702EE4EAE02C97";
	window.apiUrl="http://115.159.49.94:8181/";
	yingo.resBase("http://115.159.49.94:8181");
	window.resServer = "";
	window.resBase = "";
		 */

	window.openkey="18D4C006219FC4467FD85F90CE182B5A";
	window.openid="C8E910D08ACEE3FECBDB1CF7BA8C1C01";
	window.xtoken="8E921D0A7414ABF4EB1E009EBC9D58C5";
	window.apiUrl="http://192.168.1.254:7182/TXPetWarWebSystem/";
	// yingo.resBase("http://192.168.1.254:7182/TXPetWarWebSystem/");
	 window.resServer = "";
	 window.resBase = "";

	window.server = "ws://192.168.1.254:9999/ws/";
	window.version="r.0.0.1";
	window.ip="192.168.1.106";
    window.code="0";
    window.pf="wanba_ts";

    window.platform="wanba_ts";

    // yingo.ajaxOptions.params = {
    //     "x-auth-token": "7179DD10E94541DBB2702EE4EAE02C97"
    // };

    var loadingUI = document.getElementById("loadingUi");
    var lbar = document.getElementById("loadingBar");
    var star = document.getElementById("loadingStar");
    var connectingDiv = document.getElementById("connectingDiv");
    var loadingUmg = document.getElementById("loadingDiv");
    var loadingCon = document.getElementById("loadingCon");
    var uiWidth = 640;
    var uiHeight = 1136;
    var loadingInterId = 0;
    var loadingPercent = 0;
    function showProgress(pro){
        loadingPercent = pro;
        lbar.style.width = loadingPercent+"%";
        star.style.x = lbar.style.width+"px";
        if( pro == 100){
            removeLoading();
            document.body.style.backgroundColor = "#472700";
//            document.body.style.backgroundImage = "url(./resource/assets/fixbg.jpg)";
            document.body.style.width = uiWidth;
            document.body.style.height = uiHeight;
        }else{
            document.body.style.backgroundColor = "#f7f7f7";
        }
    }
    function removeLoading(){
        clearInterval(loadingInterId);
        if( loadingUI && loadingUI.parentNode){
                loadingUI.parentNode.removeChild(loadingUI);
        }
    }
    //showProgress(0);
    function loadCodeAndRes(){
        showProgress(loadingPercent += 10);
        if( loadingPercent == 100){
            egret.runEgret();
            // communicator.login();
        }
    }
    setTimeout(function(){
        var _scale = Math.min(window.innerHeight/uiHeight,1);
        var _topY = (window.innerHeight -   uiHeight*_scale) >> 1;
        var _leftX = (window.innerWidth - uiWidth*_scale) >> 1;
        loadingUI.style.width = uiWidth;
        loadingUI.style.height = uiHeight;
        loadingUI.style.backgroundColor = "#f7f7f7";
        loadingUI.style.border = "none";
        loadingUI.style.left = _leftX+"px";
        loadingUI.style.top = _topY+"px";
        loadingUI.style.webkitTransform = "scale("+_scale+", "+_scale+")";
        loadingUI.style.display = "block";
        loadingInterId = setInterval(loadCodeAndRes, 300);
    },300);
    if(window.orientation !== undefined) {
        window.addEventListener("orientationchange", function() {
            loadingShow(window.orientation == 0);
    }, false);
    }
    function loadingShow(){
        if( window.orientation != 0){
            var ht = window.innerHeight;
            var guideScale = ht / 640;
            document.getElementById("loadingCon").style['-webkit-transform'] = 'scale('+guideScale+','+guideScale+')';
            loadingUmg.style.display = 'block';
        }else{
            loadingUmg.style.display =   'none';
        }
    }
	 var loadScript = function (list, callback) {
        var loaded = 0;
        var loadNext = function () {
            loadSingleScript(list[loaded], function () {
                loaded++;
                if (loaded >= list.length) {
                    callback();
                }
                else {
                    loadNext();
                }
            })
        };
        loadNext();
    };

    var loadSingleScript = function (src, callback) {
        var s = document.createElement('script');
        s.async = false;
        s.src = src;
        s.addEventListener('load', function () {
            s.parentNode.removeChild(s);
            s.removeEventListener('load', arguments.callee, false);
            callback();
        }, false);
        document.body.appendChild(s);
    };

    var xhr = new XMLHttpRequest();
    xhr.open('GET', './manifest.json?v=' + Math.random(), true);
    xhr.addEventListener("load", function () {
        var manifest = JSON.parse(xhr.response);
        var list = manifest.initial.concat(manifest.game);
        loadScript(list, function () {
            /**
             * {
             * "renderMode":, //Engine rendering mode, "canvas" or "webgl"
             * "audioType": 0 //Use the audio type, 0: default, 2: web audio, 3: audio
             * "antialias": //Whether the anti-aliasing is enabled in WebGL mode, true: on, false: off, defaults to false
             * "calculateCanvasScaleFactor": //a function return canvas scale factor
             * }
             **/
            egret.runEgret({ renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor:function(context) {
                var backingStore = context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
                return (window.devicePixelRatio || 1) / backingStore;
            }});
        });
    });
    xhr.send(null);
    </script>
</body>
</html>
